<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BBA印刷首页</title>
    <!-- Favicon 网站图标-->
    <link href="images/bbaicon_03.jpg" rel="shortcut icon" />
    <!-- 样式引入 最好按照顺序
         后面会影响前面的
    -->
    <!-- 引入bootstrap核心css文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css" />

    <!-- swiper -->
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />

    <!-- 引入less文件此处必须添加 /less  ！！！ -->
    <!-- 引入重置样式文件 -->
    <link rel="stylesheet/less" href="./css/reset.less" />

    <!-- 引入公共样式 -->
    <link rel="stylesheet/less" href="./css/common.less" />

    <!-- 引入页面单独样式 -->
    <link rel="stylesheet/less" href="./css/style.less" />
  </head>
  <body style="background-color: #fff;">
    <!-- Header  -->
    <header>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#"><img src="./images/bbaicon_03.jpg" alt="" /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="./index.html">首页 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./products.html">产品中心</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./case.html">解决方案</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./services.html">服务中心</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./about.html">关于我们</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./contact.html">联系我们</a>
            </li>
          </ul>
          <div class="menu-nav">
            <a href="#">中文</a>
            <a href="#">EN</a>
          </div>
        </div>
      </nav>
    </header>
    <!-- Header end-->

    <!-- Banner -->
    <section class="banner">
      <!-- <img src="./images/banner.png" alt=""> -->
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./images/banner.png" alt="" /></div>
          <div class="swiper-slide"><img src="./images/banner.png" alt="" /></div>
          <div class="swiper-slide"><img src="./images/banner.png" alt="" /></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
      </div>
    </section>
    <!-- Banner end-->

    <!-- Anliup -->
    <section class="anliup">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-4 col-md-12">
            <div class="anlit">
              <div class="anli_box">
                <img src="./images/g1.jpg" alt="" />
                <div class="anli_bac">
                  <div class="text">创意设计</div>
                  <div class="eng">CREATIV design</div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-12">
            <div class="anlit">
              <div class="anli_box">
                <img src="./images/g2.jpg" alt="" />
                <div class="anli_bac">
                  <div class="text">新闻动态</div>
                  <div class="eng">news</div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-12">
            <div class="anlit">
              <div class="anli_box">
                <img src="./images/g3.jpg" alt="" />
                <div class="anli_bac">
                  <div class="text">公司视频</div>
                  <div class="eng">company video</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Anliup end-->

    <!-- Anli -->
    <section class="anli">
      <h>经典案例</h>
      <br />
      <i>good case</i>
    </section>
    <!-- Anli end-->

    <!-- Anlidown -->
    <section class="anlidown">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-4 col-md-12 pad">
            <div class="img_box">
              <img src="./images/anlidown_02.jpg" alt="" />
            </div>
          </div>
          <div class="col-lg-4 col-md-12 pad">
            <div class="img_box">
              <img src="./images/anlidown_03.jpg" alt="" />
            </div>
          </div>
          <div class="col-lg-4 col-md-12 pad">
            <div class="img_box">
              <img src="./images/anlidown_04.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Anlidown end -->

    <!-- Footer -->
    <section class="footer">
      <div class="container">
        <div class="item1">
          <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-12">
              <div class="about">
                <p>关于我们</p>
                <li>公司简介</li>
                <li>企业文化</li>
                <li>荣誉资质</li>
                <li>社会责任</li>
                <li>创意设计</li>
                <li>公司展厅</li>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
              <div class="about">
                <p>新闻动态</p>
                <li>公司新闻</li>
                <li>展会活动</li>
                <li>媒体报道</li>
                <li>新闻中心</li>
                <li>品牌活动</li>
                <li>员工天地</li>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
              <div class="about">
                <p>快速链接</p>
                <li>产品中心</li>
                <li>服务中心</li>
                <li>视频中心</li>
                <li>经典案例</li>
                <li>行业方案</li>
                <li>联系我们</li>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
              <div class="about">
                <p>关注我们</p>
                <img src="./images/qr_03.jpg" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="item2">24小时服务热线：020-28988858 &nbsp;MAil:bba@gmail.com</div>
        <div class="item3">友情链接：</div>
        <div class="item4">
          <li>腾讯网</li>
          <li>百度网</li>
          <li>阿里巴巴</li>
          <li>土豆网</li>
          <li>优酷网</li>
          <li>腾讯网</li>
          <li>百度网</li>
          <li>阿里巴巴</li>
          <li>土豆网</li>
          <li>优酷网</li>
          <li>腾讯网</li>
          <li>百度网</li>
          <li>阿里巴巴</li>
          <li>腾讯网</li>
          <li>百度网</li>
          <li>阿里巴巴</li>
          <li>土豆网</li>
          <li>优酷网</li>
          <li>腾讯网</li>
          <li>百度网</li>
        </div>
        <div class="item5">
          <div class="copy">@2017 bba all rights reserved</div>
          <div class="web">法律申明 | 网站地图</div>
        </div>
      </div>
    </section>
    <!-- Footer end -->
  </body>
</html>
<!-- 引入jq -->
<script src="./js/jquery-3.5.1.min.js"></script>

<!-- 引入bootstrap.js -->
<script src="./js/bootstrap.min.js"></script>

<!-- swiper -->
<script src="./js/swiper-bundle.min.js"></script>

<!-- 引入less -->
<script src="./js/less-4.1.3.js"></script>
<script>
  var mySwiper = new Swiper('.swiper', {
    loop: true, // 循环模式选项
    observer: true, // 开启动态检查器
    autoplay: {
      // 鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换
      pauseOnMouseEnter: true,
      // 用户操作swiper之后，是否禁止autoplay
      disableOnInteraction: false,
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // 注册事件处理器
    on: {
      // 回调函数 开启状态并监测到元素发生改变
      observerUpdate: function (swiper) {
        // 判断当前轮播是否处于非自动切换，如果处于非自动就进入里面的逻辑
        if (!swiper.autoplay.running) {
          // 获取调试信息
          console.log('自动轮播失效')

          // 开启自动切换
          swiper.autoplay.start()

          // 获取调试信息
          console.log('已开启自动切换')
        }
      },
    },
  })
</script>
